<template>
  <el-scrollbar ref="verticalMenusRef" class="vertical-menus-scrollbar">
    <!-- collapse-transition 是否开启折叠动画 -->
    <!-- default-active	页面加载时默认激活菜单的 index -->
    <!-- unique-opened	是否只保持一个子菜单的展开 -->
    <!-- collapse	是否水平折叠收起菜单（仅在 mode 为 vertical 时可用） -->
    <el-menu
      class="layouts-menu-vertical"
      :collapse-transition="false"
      :unique-opened="config.layout.menuUniqueOpened"
      :default-active="state.defaultActive"
      :collapse="config.layout.menuCollapse"
    >
      <MenuTree :menus="(navTabs.state.tabsViewRoutes as any)" />
    </el-menu>
  </el-scrollbar>
</template>
<script lang="ts" setup>
import { computed, nextTick, onMounted, reactive, ref } from "vue";
import MenuTree from "./menuTree.vue";
import {
  useRouter,
  useRoute,
  onBeforeRouteUpdate,
  RouteLocationNormalizedLoaded,
} from "vue-router";
import type { ElScrollbar } from "element-plus";
import { useConfig } from "@/store/config";
import { useNavTabs } from "@/store/navTabs";

const config = useConfig();
const navTabs = useNavTabs();
const route = useRoute();

//获取滚动条组件的ref
const verticalMenusRef = ref<InstanceType<typeof ElScrollbar>>();

//初始化默认激活菜单的index
const state = reactive({
  defaultActive: "",
});

// 针对侧边栏菜单高度让滚动条自适应
const verticalMenusScrollbarHeight = computed(() => {
  let menuTopBarHeight = 0;
  //如果显示logo标志还得增加50px高度
  if (config.layout.menuShowTopBar) {
    menuTopBarHeight = 50;
  }
  if (config.layout.layoutMode == "Default") {
    //32为aside上下margin
    return "calc(100vh - " + (32 + menuTopBarHeight) + "px)";
  } else {
    return "calc(100vh - " + menuTopBarHeight + "px)";
  }
});

// 激活当前路由的菜单
// const currentRouteActive = (currentRoute: RouteLocationNormalizedLoaded) => {
//   // console.log("当前路由的菜单", currentRoute);
//   switch (currentRoute.path) {
//     case "/admin/BigBoard/bigBoard1":
//     case "/admin/Bigboard/bigboard2":
//       config.setLayoutMode("Dashboard");
//       // console.log("切换布局了吗？");
//       state.defaultActive = currentRoute.path;
//       break;
//     case "/admin/Bigboard/bigboardFirst":
//       config.setLayoutMode("Dashboard");
//       // console.log("切换布局了吗？");
//       break;
//     default:
//       state.defaultActive = currentRoute.path;
//       break;
//   }
// };
const currentRouteActive = (currentRoute: RouteLocationNormalizedLoaded) => {
  console.log("当前路由的菜单", currentRoute);
  if (currentRoute.path.includes("BigScreen")) {
    config.setLayoutMode("Dashboard");
  } else {
    state.defaultActive = currentRoute.path;
  }
};

// 滚动条滚动到激活菜单所在位置
const verticalMenusScroll = () => {
  nextTick(() => {
    let activeMenu: HTMLElement | null = document.querySelector(
      ".el-menu.layouts-menu-vertical li.is-active"
    );
    if (!activeMenu) return false;
    //?dom.value.setScrollTop()
    verticalMenusRef.value?.setScrollTop(activeMenu.offsetTop);
  });
};

onMounted(() => {
  // 激活当前路由的菜单 传入route数据
  currentRouteActive(route);
  // 滚动条滚动到激活菜单所在位置
  verticalMenusScroll();
});

onBeforeRouteUpdate((to) => {
  currentRouteActive(to);
});
</script>
<style lang="scss" scoped>
.vertical-menus-scrollbar {
  height: v-bind(verticalMenusScrollbarHeight);
  // height: 100vh;
  background-color: v-bind('config.getColorVal("menuBackground")');
}

.layouts-menu-vertical {
  border: 0;
  --el-menu-bg-color: v-bind('config.getColorVal("menuBackground")');
  --el-menu-text-color: v-bind('config.getColorVal("menuColor")');
  --el-menu-active-color: v-bind('config.getColorVal("menuActiveColor")');
}
</style>
